// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store({
  //1.state（同于存储公共数据的，所有组件皆可以访问）
  // 访问方式：1.直接访问 {{$store.state.count}}
  // 2.辅助函数访问：computed处展开
state:{
  count:101,
  list:[1,2,3,4,5,6,7]
},

mutations:{
 // mutation函数都有参数
 // 参数一：永远都是state

increamCount(state){
  // 专门用于操作state数据的函数
  // 通过它操作的state会留下记录，便于调试
state.count++
},
// 参数二为传入的数据
changeCount(state,num){
  state.count=num
}
},
// actions一般用于存放异步操作，由于不能直接操作state,因此借助matuions改变state
// context是state的对象。可以用commit来促发matuions
actions:{
  asyncIncream(context){
    setTimeout(()=>{
      context.commit('increamCount')
    },1000)
  },
  asyncChange(context,num){
    setTimeout(()=>{
      context.commit('changeCount',num)
    },1000)
  }
},
getters:{
  arr(state){
    return state.list.filter(item=>item>5)
  }
}
})

// 导出仓库
export default store